<template>
	<view v-if="showFlag">
		<u-empty text="消息列表为空" mode="message" :show="msgShow"></u-empty>
		<!-- 教练详情 -->
		<view class="list" v-if="!msgShow">
			<text class="edit" v-show="editFlag == false && buttonFlag == true" @click="editHandle">编辑</text>
			<text class="edit" v-show="editFlag == true && buttonFlag == true" style="color: #333;" @click="editHandle">取消</text>
			<evan-checkbox-group>
				<view v-for="(item, index) in teachersList" :key="index" class="borderBottom1" @click="onNavigateTo('/pages/tabbar/info/infoDetail?id=' + item)">
					<view class="teachersDetails " @click="onCheckBoxClick(item, index)">
						<view v-show="editFlag"><evan-checkbox v-model="item.state" :label="item.status" @change.stop="checkBtn(item, index)" :key="index"></evan-checkbox></view>

						<view class="introduce" style="position: relative;margin-left: 20rpx;">
							<view class="redRound" v-if="item.status == 0"></view>
							<view class="teacherName">
								<view style="font-size: 26rpx;color: #999999;margin-bottom: 24rpx;">{{ item.createdate }}</view>
								<view style="font-size: 28rpx;">{{ item.content }}</view>
							</view>
						</view>
					</view>
				</view>
			</evan-checkbox-group>
		</view>
		<view v-if="loadingShow" class="loading">{{loadingText}}</view>
		<view v-show="editFlag" style="width: 750rpx;height: 100rpx;"></view>
		<view class="footer" v-show="editFlag">
			<view @click="allChoose" style="margin-left: 24rpx;font-size: 30rpx;color: #333333;">全部已读</view>
			<view @click="delHandle" style="color: #ff0f0f;font-size: 30rpx;margin-right: 24rpx;">删除</view>
		</view>
	</view>
</template>

<script>
import { news, alreadyRead, del } from '@/api/user/userCenter/news.js';
import evanCheckbox from '@/components/evan-checkbox/evan-checkbox.vue';
import EvanCheckboxGroup from '@/components/evan-checkbox/evan-checkbox-group.vue';
import uniIcon from '@/components/uni-icons/uni-icons.vue';
export default {
	components: {
		evanCheckbox,
		EvanCheckboxGroup,
		uniIcon
	},
	data() {
		return {
			loadingText: '加载中...', //加载状态
			showFlag: false,
			msgShow:false,
			teachersList: [
				// {
				// 	createdate: '2020-01-18  17:42:26',
				// 	content: '内容内容内容 内容内容......',
				// 	state: 0,
				// 	status: 1,
				// 	id: 1
				// },
			],
			editFlag: false,
			checkedArr: [], //复选框选中的值
			allChecked: false, //是否全选
			buttonFlag: true,
			page:1,
			loadingShow:true
			
		};
	},
	async onShow() {
		let res = await news(this.page);
		this.getTeacherList(res)
		this.showFlag = true;
	},
	updated(){
		if(!this.teachersList.length){
			this.buttonFlag=false
		}
	},
	watch: {
		teachersList(val) {
			// console.log(val);
			if(!val.length){
				this.msgShow=true
			}else{
				this.msgShow=false
			}
		}
	},
	// 监听触底
	onReachBottom() {
		this.loadMore()
	},
	methods: {
		getTeacherList(res){
			res.data.data.forEach((item, index) => {
				item.state = false;
			});
			if (this.page == 1) {
				this.teachersList = res.data.data;
			} else {
				this.teachersList = this.teachersList.concat(res.data.data)
			}
			if(this.teachersList.length>0){
				this.loadingShow=true
			}else{
				this.loadingShow=false
			}
		},
		async loadMore(){
			let res = await news(++this.page);
			if (res.data.data.length == 0) {
				this.loadingText = "没有数据了！";
			} else if (res.data.data.length < 10) {
				this.loadingText = "没有数据了！";
			} else {
				this.loadingText = "加载中";
			}
			this.getTeacherList(res)
		},
		async onCheckBoxClick(item, index) {
			if (this.editFlag) {
				if (item.state) {
					item.state = false;
					this.allChecked = false;
				} else {
					item.state = true;
					let res = this.teachersList.every(item => {
						return item.state == true;
					});
					if (res) {
						this.allChecked = true;
					}
				}
			} else {
				item.status = 1;
				await alreadyRead(item.id);
			}
		},
		//编辑
		editHandle() {
			if (this.editFlag) {
				this.editFlag = false;
				this.allChecked = false;
			} else {
				this.editFlag = true;
			}
		},
		//多选框
		checkBtn(item, index) {
			console.log(item.state);
			if (item.state) {
				item.state = false;
			} else {
				item.state = true;
				let res = this.teachersList.every(item => {
					return item.state == true;
				});
				if (res) {
					this.allChecked = true;
				}
			}
		},
		// 多选复选框改变事件
		changeCheckbox() {
			for (let i = 0; this.teachersList.length; i++) {
				if (this.teachersList[i].state == false) {
					return (this.allChecked = false);
				} else {
					return (this.allChecked = true);
				}
			}
		},
		// 全选事件
		async allChoose(e) {
			let arr = [];
			this.teachersList.forEach(item => {
				if (item.status == '0') {
					arr.push(item.id);
				}
				item.status = 1;
				item.state = true;
			});
			if (arr.length > 0) {
				let arrList = arr.join(',');
				await alreadyRead(arrList);
			}
		},
		delHandle() {
			uni.showModal({
				title: '删除',
				content: '确定要删除吗?',
				success:async res => {
					if (res.confirm) {
						let arr=[]
						this.teachersList = this.teachersList.filter(item => {
							if(item.state=true){
								arr.push(item.id);
							}
							return item.state == false;
						});
						if (arr.length > 0) {
							let arrList = arr.join(',');
							await del(arrList);
						}
						if(this.teachersList.length>0){
							this.loadingShow=true
						}else{
							this.loadingShow=false
							this.editFlag = false;
						}
					}
				}
			});
		},
		onNavigateTo(url) {
			// if(this.editFlag==false){
			// 	uni.navigateTo({
			// 		url: url
			// 	});
			// }
		}
	}
};
</script>

<style lang="scss">
@import './css/myTeacher.scss';
@import '@/pages/tabbar/index/css/index.scss';
.redRound {
	position: absolute;
	left: -22rpx;
	top: 8rpx;
	width: 19rpx;
	height: 19rpx;
	background-color: #ff0000;
	border-radius: 50%;
}

.edit {
	position: fixed;
	right: 40rpx;
	top: 20rpx;
}
</style>
